<template>
      <Row>
        <Col :xs="{span:24}" :sm="{span:22,offset:1}" :md="{span:20,offset:2}">
          <el-scrollbar style="height:100%" >
            <div style="padding:10px">
                <h2 style="text-align:left">LSE API Request Test</h2>
                <div class="tips" style="text-align:left">本模块外置地址: http://api.lseanime.com/index.html/#/onLineTest</div>
                <div class="tips" style="text-align:left">External address of this module: http://api.lseanime.com/index.html/#/onLineTest</div>
                <!-- 头部链接发送 -->
                <div style="margin-top:10px">
                    <el-input placeholder="Enter request URL" v-model="url" size="mini">
                        <el-select v-model="method" :value="method" slot="prepend" style="width:90px">
                            <el-option label="GET" value="get"></el-option>
                            <el-option label="POST" value="post"></el-option>
                            <el-option label="DELETE" value="delete"></el-option>
                            <el-option label="HEAD" value="head"></el-option>
                            <el-option label="PUT" value="put"></el-option>
                            <el-option label="PATCH" value="patch"></el-option>
                            <el-option label="COPY" value="copy"></el-option>
                            <el-option label="OPTIONS" value="options"></el-option>
                            <el-option label="LINK" value="link"></el-option>
                            <el-option label="UNLINK" value="unlink"></el-option>
                            <el-option label="PURGE" value="purge"></el-option>
                            <el-option label="LOCK" value="lock"></el-option>
                            <el-option label="UNLOCK" value="unlock"></el-option>
                            <el-option label="PROPFIND" value="propfind"></el-option>
                            <el-option label="VIEW" value="view"></el-option>
                        </el-select>
                    </el-input>
                    <div class="tips" style="text-align:left;margin-top:10px">
                      请在URL前添加http://或https://等前缀信息, LSE API接口测试仅支持测试允许跨域的接口<br>
                      Please prefix the URL with http:// or https://. LSE API interface tests only support interfaces that allow testing across domains
                    </div>
                    <div style="margin-top:10px;text-align:right">
                        <el-button type="primary" size="mini" @click="ajax">Send</el-button>
                        <el-button type="primary" size="mini" v-if="projectId !== ''" @click="saveToThisProject">Save to this project</el-button>
                    </div>
                    <div class="tips" v-if="projectId !== ''" style="text-align:right;margin-top:10px">
                      BODY下JSON格式参数内容不会保存至此接口参数中<br>
                      The JSON-formatted parameter content under the BODY will not be saved to the interface parameter
                    </div>
                </div>
                <!-- 参数区 -->
                <div class="lse_interface_test_param_style" style="margin-top:10px">
                    <Tabs type="card" @on-click="tabCheck">
                      <!-- params -->
                        <TabPane label="Params" name="params">
                            <div style="margin-bottom:10px;text-align:right">
                                <el-button size="mini" icon="el-icon-plus" @click="modal.flag=true;modal.title='Add Param';modal.type='params'">
                                    <span class="tips">Add Param</span>
                                </el-button>
                            </div>
                            <el-table size="mini"
                                :data="paramsData" @selection-change="paramsDataChange"
                                border
                                style="width: 100%">
                                <el-table-column
                                    type="selection"
                                    width="40">
                                </el-table-column>
                                <el-table-column type="expand" width="40">
                                  <template slot-scope="param">
                                      <el-form label-position="top" inline class="demo-table-expand">
                                      <el-form-item label="KEY" style="width:100%">
                                          <el-input v-model="param.row.key" size="mini" show-word-limit></el-input>
                                      </el-form-item>
                                      <el-form-item label="VALUE" style="width:100%">
                                          <el-input v-model="param.row.value" size="mini" show-word-limit></el-input>
                                      </el-form-item>
                                      </el-form>
                                  </template>
                                </el-table-column>
                                <el-table-column
                                prop="key"
                                label="KEY">
                                </el-table-column>
                                <el-table-column
                                prop="value"
                                label="VALUE">
                                </el-table-column>
                                <el-table-column width="40" align="center">
                                    <template slot-scope="scope">
                                        <el-button type="text"
                                        size="mini" icon="el-icon-close" @click.native.prevent="deleteParam(scope.$index, scope.row)"></el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </TabPane>
                        <!-- headers -->
                        <TabPane label="Headers" name="headers">
                            <div style="margin-bottom:10px;text-align:right">
                                <el-button size="mini" icon="el-icon-plus" @click="modal.flag=true;modal.title='Add Header';modal.type='headers'">
                                    <span class="tips">Add Header</span>
                                </el-button>
                            </div>
                            <el-table size="mini"
                                :data="headerData" @selection-change="headerDataChange"
                                border
                                style="width: 100%">
                                <el-table-column
                                    type="selection"
                                    width="40">
                                </el-table-column>
                                <el-table-column type="expand" width="40">
                                  <template slot-scope="param">
                                      <el-form label-position="top" inline class="demo-table-expand">
                                      <el-form-item label="KEY" style="width:100%">
                                          <el-input v-model="param.row.key" size="mini" show-word-limit></el-input>
                                      </el-form-item>
                                      <el-form-item label="VALUE" style="width:100%">
                                          <el-input v-model="param.row.value" size="mini" show-word-limit></el-input>
                                      </el-form-item>
                                      </el-form>
                                  </template>
                                </el-table-column>
                                <el-table-column
                                prop="key"
                                label="KEY">
                                </el-table-column>
                                <el-table-column
                                prop="value"
                                label="VALUE">
                                </el-table-column>
                                <el-table-column width="40" align="center">
                                    <template slot-scope="scope">
                                        <el-button type="text"
                                        size="mini" icon="el-icon-close" @click.native.prevent="deleteParam(scope.$index, scope.row)"></el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </TabPane>
                        <!-- body -->
                        <TabPane label="Body" name="body">
                            <div style="margin-top:10px;text-align:left">
                                <el-radio-group v-model="bodyData.flag" @change="paramValuehange">
                                    <el-radio style="margin:5px" label="none">none</el-radio>
                                    <el-radio style="margin:5px" label="json">json</el-radio>
                                    <el-radio style="margin:5px" label="form-data">form-data</el-radio>
                                    <el-radio style="margin:5px" label="xwfu">x-www-form-urlencoded</el-radio>
                                </el-radio-group>
                            </div>
                            <!-- body 内容区 -->
                            <!-- JSON BODY 内容 -->
                            <div v-show="bodyData.flag === 'json'">
                              <div style="text-align:left;margin-top:10px">
                                <div style="margin-top:10px;">
                                  ArrayFormat:&nbsp;
                                  <el-select v-model="arrayFormat" :value="arrayFormat" size="mini">
                                      <el-option label="indices" value="indices"></el-option>
                                      <el-option label="brackets" value="brackets"></el-option>
                                      <el-option label="repeat" value="repeat"></el-option>
                                  </el-select>
                                </div>
                                <div style="margin-top:10px">
                                  <el-checkbox v-model="isAppJson">application/json;charset=UTF-8</el-checkbox>
                                </div>
                              </div>
                                <div style="display:inline-flex;width:calc(50% - 10px)">
                                    <el-input
                                        type="textarea"
                                        :autosize="{ minRows: 5}"
                                        placeholder="请输入JSON内容" @change="formattingJson"
                                        v-model="bodyData.json">
                                        </el-input>
                                </div>
                                <div style="display:inline-flex;width:calc(50% - 10px)">
                                  <JsonViewer :value="bodyData.formatJson" style="text-align:left"></JsonViewer>
                                </div>
                            </div>
                            <!-- form-data BODY 内容 -->
                            <div v-show="bodyData.flag === 'form-data'">
                                <div style="margin-bottom:10px;text-align:right">
                                <el-checkbox v-model="isFormData">multipart/form-data</el-checkbox>
                                <el-button size="mini" icon="el-icon-plus" @click="modal.flag=true;modal.title='Add Body Data';modal.type='body'">
                                    <span class="tips">Add Body Data</span>
                                </el-button>
                                </div>
                                <el-table size="mini"
                                    :data="bodyData.formData" @selection-change="bodyDataFormDataChange"
                                    border
                                    style="width: 100%">
                                    <el-table-column
                                        type="selection"
                                        width="40">
                                    </el-table-column>
                                    <el-table-column
                                    prop="key"
                                    label="KEY">
                                    </el-table-column>
                                    <el-table-column
                                    label="VALUE">
                                    <template slot-scope="scope">
                                        <el-tooltip placement="top" style="max-width:200px">
                                            <div slot="content">
                                                <span v-if="typeof(scope.row.value) === 'object'">
                                                    <span>contains {{scope.row.value.length}} files such as {{scope.row.value[0].name}}</span>
                                                </span>
                                                <span v-else>{{scope.row.value}}</span>
                                            </div>
                                            <span>{{typeof(scope.row.value) === 'object' ? scope.row.value.length + 'files' : scope.row.value}}</span>
                                        </el-tooltip>
                                    </template>
                                    </el-table-column>
                                    <el-table-column width="40" align="center">
                                        <template slot-scope="scope">
                                            <el-button type="text"
                                            size="mini" icon="el-icon-close" @click.native.prevent="deleteParam(scope.$index, scope.row)"></el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                            <!-- x-wwww.... BODY 内容 -->
                            <div v-show="bodyData.flag === 'xwfu'">
                            <div style="margin-bottom:10px;text-align:right">
                                <el-button size="mini" icon="el-icon-plus" @click="modal.flag=true;modal.title='Add Body Data';modal.type='body'">
                                    <span class="tips">Add Body Data</span>
                                </el-button>
                            </div>
                            <el-table size="mini"
                                :data="bodyData.xwfu" @selection-change="bodyDataXWFUDataChange"
                                border
                                style="width: 100%">
                                <el-table-column
                                    type="selection"
                                    width="40">
                                </el-table-column>
                                <el-table-column type="expand" width="40">
                                  <template slot-scope="param">
                                      <el-form label-position="top" inline class="demo-table-expand">
                                      <el-form-item label="KEY" style="width:100%">
                                          <el-input v-model="param.row.key" size="mini" show-word-limit></el-input>
                                      </el-form-item>
                                      <el-form-item label="VALUE" style="width:100%">
                                          <el-input v-model="param.row.value" size="mini" show-word-limit></el-input>
                                      </el-form-item>
                                      </el-form>
                                  </template>
                                </el-table-column>
                                <el-table-column
                                prop="key"
                                label="KEY">
                                </el-table-column>
                                <el-table-column
                                prop="value"
                                label="VALUE">
                                </el-table-column>
                                <el-table-column width="40" align="center">
                                    <template slot-scope="scope">
                                        <el-button type="text"
                                        size="mini" icon="el-icon-close" @click.native.prevent="deleteParam(scope.$index, scope.row)"></el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            </div>
                        </TabPane>
                    </Tabs>
                    <div class="tips" style="text-align:left;margin-top:10px">
                      参数勾选后才能生效<br>
                      The parameter is selected before it takes effect
                    </div>
                </div>
                <!-- Response区 成功失败内容均在此展示 自动JSON序列化 -->
                <Divider orientation="left">Response</Divider>
                <div style="margin-top:10px;padding:10px;text-align:left">
                  <span>Pretty:&nbsp;
                      <el-select v-model="responseData.type" @change="responseChangeFormat" :value="responseData.type" size="mini">
                          <el-option label="Text" value="Text"></el-option>
                          <el-option label="JSON" value="JSON"></el-option>
                          <el-option label="HTML" value="HTML"></el-option>
                          <el-option label="XML" value="XML"></el-option>
                      </el-select>
                  </span>
                </div>
                <div style="margin-top:10px;padding:10px;text-align:left;margin-bottom:30px;height:500px;overflow:auto"
                v-loading="responseData.loading">
                  <el-scrollbar style="height:100%" >
                    <JsonViewer :value="responseData.showData" style="text-align:left" v-if="responseData.type === 'JSON'"></JsonViewer>
                    <div v-html="responseData.showData" v-else-if="responseData.type === 'HTML'"></div>
                    <div v-html="responseData.showData" v-else-if="responseData.type === 'XML'"></div>
                    <div v-else>{{responseData.showData}}</div>
                  </el-scrollbar>
                </div>
            </div>
            <!-- 弹出层添加参数 -->
            <transition name="fade">
              <div v-if="modal.flag">
                <div class="lse_interface_mask" @click="modal.flag = false;paramValuehange()"></div>
                <div class="lse_interface_body">
                  <h3>{{modal.title}}</h3>
                    <el-form style="text-align:left" label-position="top" label-width="80px" :model="param">
                    <el-form-item label="KEY">
                        <el-input size="mini" v-model="param.key"></el-input>
                    </el-form-item>
                    <el-form-item label="VALUE" v-if="bodyData.flag === 'form-data' && modal.type === 'body'">
                        <Select v-model="bodyData.formDataFlag" @on-change="paramValuehange" :value="bodyData.formDataFlag">
                            <Option value="Text">Text</Option>
                            <Option value="File">File</Option>
                        </Select>
                        <el-input v-if="bodyData.formDataFlag === 'Text'" size="mini" v-model="param.value"></el-input>
                        <el-button size="mini" v-else @click="fileClick('file')">Select Files</el-button>
                        <el-input v-if="bodyData.formDataFlag === 'File'" size="mini" readonly :value="param.value.length + 'files'"></el-input>
                        <input type="file" style="display:none" ref="file" @change="fileChage" multiple>
                    </el-form-item>
                    <el-form-item label="VALUE" v-else>
                        <el-input size="mini" v-model="param.value"></el-input>
                    </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button size="mini" style="margin-top:10px" @click="modal.flag = false;paramValuehange()">Cancel</el-button>
                        <el-button size="mini" style="margin-top:10px" type="primary" @click="addParams">Confirm</el-button>
                    </span>
                </div>
                </div>
            </transition>
          </el-scrollbar>
        </Col>
      </Row>
</template>

<script>
import axios from 'axios'
import qs from 'qs'
import JsonViewer from 'vue-json-viewer'
import XMLFORMAT from '../../util/xmlformat'
export default {
  name: 'InterfaceTest',
  data () {
    return {
      modal: {
        title: '提示',
        flag: false,
        type: 'params'
      },
      method: 'get',
      url: this.urlInside || '',
      paramsData: this.paramsDataInside || [],
      headerData: [{
        key: 'Content-Type',
        value: 'application/x-www-form-urlencoded;charset=UTF-8'
      }, {
        key: 'User-Agent',
        value: 'LSE API/1.1.3'
      }],
      bodyData: {
        flag: 'none',
        formData: [],
        formDataFlag: 'Text',
        xwfu: [],
        json: '',
        formatJson: ''
      },
      param: {
        key: '',
        value: ''
      },
      isXs: false,
      // axios 数组 indices/brackets/repeat
      arrayFormat: 'indices',
      isAppJson: true,
      isFormData: true,
      // 选中的参数
      // 选中的头部参数
      selectedHead: [],
      // 选中的body参数
      selectedParams: [],
      // 返回的数据
      responseData: {
        data: 'Response content',
        showData: 'Response content',
        type: 'Text',
        loading: false
      },
      // 项目组ID (在选中的项目中打开调试)
      projectId: this.projectIdInside
    }
  },
  props: {
    urlInside: {
      type: String,
      default: ''
    },
    paramsDataInside: {
      type: Array,
      default: () => []
    },
    projectIdInside: {
      type: [String, Number],
      default: ''
    }
  },
  watch: {
    urlInside: {
      immediate: true,
      handler (e) {
        this.url = e
      }
    },
    paramsDataInside: {
      immediate: true,
      handler (e) {
        this.paramsData = e
      }
    },
    projectIdInside: {
      immediate: true,
      handler (e) {
        this.projectId = e
      }
    }
  },
  components: {
    JsonViewer
  },
  methods: {
    objCopy () {
      let paramx = {}
      for (let par in this.param) {
        paramx[par] = this.param[par]
      }
      return paramx
    },
    fileClick (ref) {
      this.$refs[ref].dispatchEvent(new MouseEvent('click'))
    },
    fileChage (e) {
      this.param.value = e.target.files
    },
    tabCheck (name) {
      this.modal.type = name
      this.param.value = ''
    },
    paramValuehange (e) {
      this.param.value = ''
    },
    // params 参数
    paramsDataChange (selection) {
      this.selectedParams = []
      this.selectedParams = selection
    },
    // header 参数
    headerDataChange (selection) {
      this.selectedHead = selection
    },
    // body 内 formdata 参数
    bodyDataFormDataChange (selection) {
      this.selectedParams = []
      this.selectedParams = selection
    },
    // body内 xwfu 参数
    bodyDataXWFUDataChange (selection) {
      this.selectedParams = []
      this.selectedParams = selection
    },
    addParams () {
      let param = this.objCopy()
      switch (this.modal.type) {
        case 'params':
          if (param.key) {
            this.paramsData.push(param)
          } else {
            this.lseutil.msg({
              type: 2,
              msg: '请输入KEY值'
            })
          }
          break
        case 'headers':
          if (param.key) {
            this.headerData.push(param)
          } else {
            this.lseutil.msg({
              type: 2,
              msg: '请输入KEY值'
            })
          }
          break
        case 'body':
          switch (this.bodyData.flag) {
            case 'form-data':
              if (param.key) {
                this.bodyData.formData.push(param)
              } else {
                this.lseutil.msg({
                  type: 2,
                  msg: '请输入KEY值'
                })
              }
              break
            case 'xwfu':
              if (param.key) {
                this.bodyData.xwfu.push(param)
              } else {
                this.lseutil.msg({
                  type: 2,
                  msg: '请输入KEY值'
                })
              }
              break
            default:
              break
          }
          break
        default:
          break
      }
    },
    deleteParam (index, obj) {
      switch (this.modal.type) {
        case 'params':
          this.paramsData.splice(index, 1)
          break
        case 'headers':
          this.headerData.splice(index, 1)
          break
        case 'body':
          switch (this.bodyData.flag) {
            case 'form-data':
              this.bodyData.formData.splice(index, 1)
              break
            case 'xwfu':
              this.bodyData.xwfu.splice(index, 1)
              break
            default:
              break
          }
          break
        default:
          break
      }
    },
    formattingJson () {
      try {
        if (this.bodyData.json) {
          this.bodyData.formatJson = JSON.parse(this.bodyData.json)
        } else {
          this.bodyData.formatJson = 'Please enter the JSON content'
        }
      } catch (error) {
        this.bodyData.formatJson = error.message
      }
    },
    responseChangeFormat () {
      this.responseData.loading = false
      switch (this.responseData.type) {
        case 'JSON':
          try {
            this.responseData.showData = JSON.parse(this.responseData.data)
          } catch (error) {
            this.responseData.showData = this.responseData.data
          }
          break
        case 'HTML':
          this.responseData.showData = this.responseData.data
          break
        case 'XML':
          let xmlData = XMLFORMAT.parsexml(this.responseData.data, 'text/xml')
          if (xmlData !== false) {
            this.responseData.showData = xmlData
          } else {
            this.responseData.showData = this.responseData.data
          }
          break
        default:
          this.responseData.showData = this.responseData.data
          break
      }
    },
    // axios 请求封装
    ajax () {
      if (this.url === '') {
        this.lseutil.msg({
          msg: 'Please enter the request URL',
          type: 3
        })
        return
      }
      this.responseData.loading = true
      let headers = {}
      // 遍历选中的header 生成headers
      this.selectedHead.forEach(element => {
        headers[element.key] = element.value
      })
      // 遍历选中的param 生成data 传入参数
      let data = {}
      this.selectedParams.forEach(element => {
        data[element.key] = element.value
      })
      switch (this.modal.type) {
        case 'body':
          switch (this.bodyData.flag) {
            case 'form-data':
              if (this.isFormData) {
                headers['Content-Type'] = 'multipart/form-data'
              }
              // 转换参数
              let formData = new FormData()
              this.selectedParams.forEach(element => {
                if (typeof (element.value) === 'object') {
                  for (const i in element.value) {
                    formData.append(element.key, element.value[i])
                  }
                } else {
                  formData.append(element.key, element.value)
                }
              })
              axios({
                url: this.url,
                data: formData,
                headers: headers,
                method: this.method
              }).then(response => {
                this.responseData.data = response.data
                this.responseChangeFormat()
              }, error => {
                this.lseutil.msg({
                  msg: 'Network request error',
                  type: 3
                })
                this.responseData.data = error.message
                this.responseChangeFormat()
              })
              break
            case 'xwfu':
              headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
              axios({
                url: this.url,
                data: this.method === 'get' ? data : qs.stringify(data),
                headers: headers,
                method: this.method
              }).then(response => {
                this.responseData.data = response.data
                this.responseChangeFormat()
              }, error => {
                this.lseutil.msg({
                  msg: 'Network request error',
                  type: 3
                })
                this.responseData.data = error.message
                this.responseChangeFormat()
              })
              break
            case 'json':
              if (this.isAppJson) {
                headers['Content-Type'] = 'application/json;charset=UTF-8'
              }
              axios({
                url: this.url,
                data: qs.stringify(data, {
                  arrayFormat: this.arrayFormat,
                  allowDots: true
                }),
                headers: headers,
                method: this.method
              }).then(response => {
                this.responseData.data = response.data
                this.responseChangeFormat()
              }, error => {
                this.lseutil.msg({
                  msg: 'Network request error',
                  type: 3
                })
                this.responseData.data = error.message
                this.responseChangeFormat()
              })
              break
            default:
              break
          }
          break
        default:
          let url = this.url
          if (this.method === 'get') {
            let datax = ''
            for (let key in data) {
              datax += key + '=' + data[key] + '&'
            }
            url += '?' + datax
          }
          axios({
            url: url,
            data: this.method === 'get' ? data : qs.stringify(data),
            headers: headers,
            method: this.method
          }).then(response => {
            this.responseData.data = response.data
            this.responseChangeFormat()
          }, error => {
            this.lseutil.msg({
              msg: 'Network request error',
              type: 3
            })
            this.responseData.data = error.message
            this.responseChangeFormat()
          })
          break
      }
    },
    //  保存到当前选中的项目中 - 只在站内接口列表中打开调试有效
    saveToThisProject () {
      if (this.projectId === '') {
        this.lseutil.msg({
          msg: 'The item identity does not exist and cannot be stored'
        })
        return
      }
      let loading = this.lseutil.loading('正在保存')
      let params = []
      this.selectedParams.forEach(element => {
        let param = {}
        param.paramName = element.key
        params.push(param)
      })
      let apiInfo = {
        url: this.url.substr(0, 1000),
        projectId: this.projectId,
        name: this.url.substr(0, 200),
        method: this.method.toUpperCase(),
        success: this.responseData.data.substr(0, 4000),
        params: params
      }
      this.lseajax.post(this.lseajax.baseurl + '/api/project/createApi', apiInfo, true).then((data) => {
        if (data.code === 200) {
          this.lseutil.msg({
            msg: data.msg
          })
          this.getProjectApiList()
        } else {
          this.lseutil.msg({
            msg: data.msg
          })
        }
        loading.close()
      }).catch(res => {
        loading.close()
      })
    },
    getProjectApiList () {
      this.$emit('getProjectApiList', 1)
    }
  },
  created () {
    let width = document.body.clientWidth
    if (width <= 768) {
      this.isXs = true
    } else {
      this.isXs = false
    }
  }
}
</script>

<style scoped>
>>>.lse_interface_test_param_style > .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab{
    border-radius: 0;
    background: #fff;
}
>>>.lse_interface_test_param_style > .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active{
    border-top: 1px solid #3399ff;
}
>>>.lse_interface_test_param_style > .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active:before{
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: #3399ff;
    position: absolute;
    top: 0;
    left: 0;
}
.tips {
  font-size: 12px;
  color: #999;
}
>>>.el-scrollbar__wrap{
  overflow-x: hidden;
}
/* 格式化样式 */
>>>.code-string{
  color: #993300;
}
>>>.code-number{
  color: #cc00cc;
}
>>>.code-boolean{
  color: #000033;
}
>>>.code-numm{
  color: magenta;
}
>>>.code-key{
  color: #003377;
  font-weight: bold;
}
.tips {
  font-size: 12px;
  color: #999;
}
.lse_interface_mask{
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background:rgba(0, 0, 0, 0.5);
    z-index: 99999;
}
.lse_interface_body{
    width: 40%;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    overflow: auto;
    background: white;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
    z-index: 100000;
    border-radius: 5px;
    padding: 15px 20px;
}
@media screen and (max-width: 768px) {
    .lse_interface_body{
        width: 80%;
    }
}
</style>
